<template>
  <a-layout :style="{minWidth: '1080px'}">
    <a-layout-header :style="{ width:'100%',height:'56px'}">
      <div class="logo">
        <i class="fa fa-anchor fa-2x" aria-hidden="true"></i>
      </div>
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['3']"
        :style="{ lineHeight:'56px',height:'56px'}"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header><!--页面顶部导航-->
    <a-layout-content :style="{ padding:'0 50px',position:'relative'}">
      <a-breadcrumb :style="{ margin:'16px 0'}">
        <a-breadcrumb-item>home</a-breadcrumb-item>
        <a-breadcrumb-item>表单数据</a-breadcrumb-item>
        <a-breadcrumb-item>个人博客</a-breadcrumb-item>
      </a-breadcrumb><!--面包屑导航-->
      <a-row type="flex" justify="space-between" align="top" :style="{padding:'20px 30px',background:'#fff'}">
        <a-col :span="3">
          <a-button icon="edit" :style="{marginBottom:'10px',fontSize:'10px'}" size="small" @click="Write">写一个</a-button>
          <a-button icon="search" :style="{fontSize:'10px'}" size="small">找一个</a-button>
        </a-col><!--按钮组-->
        <a-col :span="18">
            <template v-if="addNew.sign">
              <div class="addOne">
                <a-input placeholder="输入你的标题" v-model="addNew.content.title" :style="{marginBottom: '10px'}" @change="Check"/>
                <a-textarea :autosize="{ minRows: 4, maxRows: 8 }" placeholder="键入你的内容" v-model="addNew.content.content" :style="{marginBottom: '10px'}" @change="Check"/>
                <div class="btn" :style="{ textAlign:'right' }">
                  <a-button type="primary" :disabled="addNew.confirmBtn" size="small" :style="{ fontSize:'10px', marginRight:'10px'}" @click="Confirm">确定</a-button>
                  <a-button size="small" :style="{ fontSize:'10px'}" @click="Cancel">取消</a-button>
                </div><!--写博客的功能按钮组-->
              </div>
            </template><!--点击写博客按钮后会出现的板块-->
            <div class="blogs">
              <transition-group
                name="list"
                enter-active-class="animated slideInUp"
                leave-active-class="animated zoomOut"
              >
                <div class="sin-blog" v-for="item in blogList" v-bind:key="item.id">
                    <div class="blog-header">
                      <div class="ava"><a-avatar style="height: 3rem;width: 3rem;line-height: 3rem" icon="user" /></div><!--博客作者头像-->
                      <div class="b-title">{{item.title}}</div><!--博客标题-->
                    </div><!--博客头部包含头像和标题-->
                    <div class="blog-content">{{item.content}}</div><!--博客内容-->
                    <div>
                      <a-row type="flex" justify="space-between">
                        <a-col :span="2" >
                          <a-icon type="heart" :theme="item.likes===true?'filled':'outlined'" @click.stop="onClick(item)" />
                        </a-col><!--喜欢按钮-->
                        <a-col :span="2" >
                          <a-icon type="retweet" style="margin-right: .2rem"/>
                          <a-icon type="message" :theme="item.addcomment===true?'filled':'outlined'" @click.stop="AddComment(item)" />
                        </a-col><!--转发评论按钮-->
                      </a-row>
                    </div><!--博客底部功能区，使用栅格布局嵌套左右部分按钮-->
                  <transition
                    name="comment"
                    enter-active-class="animated slideInLeft"
                    leave-active-class="animated zoomOut"
                  >
                    <div class="comment" :style="{width:'86%',margin:'0 auto',textAlign:'left'}" v-if="item.addcomment">
                        <a-comment>
                          <a-form-item :style="{marginBottom:'12px'}">
                            <a-textarea :rows="3" v-model="item.newComment"></a-textarea>
                          </a-form-item><!--新增评论的输入框-->
                          <a-form-item>
                            <a-button
                              htmlType="submit"
                              type="primary"
                              size="small"
                              :style="{ fontSize: '10px'}"
                              @click="handleSubmit(item)"
                            >
                              新增评论
                            </a-button>
                          </a-form-item><!--新增评论的确定提交按钮-->
                        </a-comment>
                      <a-list
                        :header="`${item.comments.length} ${item.comments.length > 1 ? 'replies' : 'reply'}`"
                        itemLayout="horizontal"
                        v-bind:key="item.comments.length + 2"
                        v-if="item.comments.length"
                      >
                        <a-list-item v-for="sin in item.comments" v-bind:key="sin.id">
                          <a-comment
                            :author="sin.author"
                            :avatar="sin.avatar"
                            :content="sin.content"
                          >
                          </a-comment>
                        </a-list-item>
                      </a-list>
                    </div><!--评论功能-->
                  </transition>
                </div><!--单个博客框架-->
              </transition-group>
            </div><!--整个博客容器框架-->
        </a-col><!--博客部分-->
        <a-col :span="3"></a-col><!--广告推广站外链:可放图片链接/添加到豆瓣按钮-->
      </a-row><!--页面主体数据-->
    </a-layout-content><!--页面主体容器-->
    <a-layout-footer :style="{ textAlign:'center'}">
      Maio's v-blog &copy; 2019 createad;
    </a-layout-footer><!--页脚链接部分-->
  </a-layout>
</template>

<script>
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AFormItem from 'ant-design-vue/es/form/FormItem'
export default {
  name: 'Blog',
  components: {AFormItem, ATextarea, ACol, ARow, ALayoutSider},
  data () {
    return {
      addNew: {
        sign: false,
        confirmBtn: true,
        content: {
          title: '',
          content: ''
        }
      }, // 该对象用来新增一个博客blog
      blogList: [{
        avatar: {
          user: 'username',
          id: 'test1',
          avatar_Url: 'lianjie'
        },
        id: 'test' + 1,
        title: 'itemOne',
        content: 'this should be an require blog content test1',
        likes: false,
        addcomment: false,
        reTweet: true,
        comments: [],
        newComment: '' // 该对象用来新增一个评论comment
        // id: 'text' + 2,
        // author: 'DO not',
        // avatar: 'src',
        // content: 'this is one fake data',
        // datetime: ''
      }], // 这个数组应由后台异步请求而来，同样的也需要将更更新后的数据返回给后端进行处理
      theme: 'outlined'
    }
  },
  methods: {
    onClick: function (item) {
      item.likes = item.likes !== true
    }, // 喜欢按钮的切换状态/可以使用更好的动画来完成，后期优化项
    AddComment: function (item) {
      item.addcomment = item.addcomment !== true
      console.log(item.addcomment)
    }, // 评论展开按钮的切换已知bug不能控制单独的评论按钮
    Write: function () {
      this.addNew.sign = true
      this.addNew.confirmBtn = true
    }, // 写一个按钮功能
    Check: function () {
      this.addNew.confirmBtn = !(!this.addNew.content.title.match(/^[ ]*$/) && !this.addNew.content.content.match(/^[ ]*$/))
    }, // 判断两个输入框而不是一个输入框，而且应该是改变@blur还是不准确
    Cancel: function () {
      this.addNew = {
        sign: false,
        content: {
          title: '',
          content: ''
        }
      }
    }, // 取消按钮操作功能111
    Confirm: function () {
      let standardObj = {
        avatar: {
          user: 'username',
          id: 'test1',
          avatar_Url: 'lianjie'
        },
        id: 'test' + (this.blogList.length + 1),
        title: '',
        content: '',
        likes: false,
        addcomment: false,
        reTweet: true,
        comments: [],
        newComment: ''
      }
      Object.assign(standardObj, this.addNew.content)
      this.blogList.unshift(standardObj) // 应从头部插入
      this.Cancel()
    }, // 确定按钮操作功能
    // Avoid: function (e) {
    //   for (let item of this.blogList) {
    //     if (e.currentTarget.dataset.id === item.id) {
    //     }
    //   }
    //   // 取消不同框的数据联系。
    // }, // 取消其他输入框的数据联系
    handleSubmit: function (item) {
      if (item.newComment.match(/^[ ]*$/)) { return }
      let obj = {
        id: 'test' + item.comments.length,
        author: 'DO not',
        avatar: 'src',
        content: '',
        datetime: ''
      }
      let currentComment = {
        content: item.newComment
      }
      Object.assign(obj, currentComment)
      item.comments.unshift(obj)
      item.newComment = ''
      // 将newComment里面的值合并给对应的blogitem里面的comments
    } // 提交评论的方法
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .logo{
    width: 120px;
    height: 31px;
    color:lightskyblue;
    text-align: center;
    line-height: 31px;
    margin: 16px 24px 16px 0;
    float: left;
  }
  .addOne{
    padding: 20px;
    margin: 16px auto 20px;
    margin-top: 0;
    width:720px;
    border: 1px solid #999;
    border-radius: 4px;
    background: white;
  }
  .blogs{
    text-align: center;
    min-height: 555px;
  }
  .sin-blog{
    padding: 20px;
    margin: 16px auto 20px;
    transition: all .6s ease;
    border: 1px solid #666;
    width:720px;
    display: inline-block;
  }
  .sin-blog:hover{
    box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
  }
  .blog-header{
    position: relative;
    padding: 14px 0;
    text-align: center;
  }
  .ava{
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 14px;
  }
  .b-title{
    font-size: 1.1rem;
    width: 60%;
    margin: 0 auto;
    padding: 4px;
    color:#333;
  }
  .blog-content{
    width: 86%;
    border: 1px solid #eee;
    margin: 14px auto;
    min-height: 90px;
    border-radius: 5px;
    text-align: left;
    text-indent: 1rem;
  }
</style>
